import React from 'react';
import { Table, Form, Button, Badge, Card } from 'react-bootstrap';

const TodoList = ({ todos, onToggleComplete, onDeleteTodo, onEditTodo }) => {
  if (!todos.length) {
    return (
        <Card className="text-center p-5 bg-light border-0 shadow-sm">
          <Card.Body>
            <Card.Title className="text-muted">暂无待办事项</Card.Title>
            <Card.Text>点击上方的"添加任务"按钮创建一个新的待办事项</Card.Text>
          </Card.Body>
        </Card>
    );
  }

  return (
      <div className="todo-list-container">
        <h4 className="mb-3 d-flex align-items-center">
          <i className="bi bi-list-task me-1">任务列表</i>
          <Badge bg="primary" className="ms-2">{todos.length}</Badge>
        </h4>
        <Card className="shadow-sm">
          <Table hover responsive className="mb-0">
            <thead className="bg-light">
            <tr>
              <th style={{width: "40%"}}>名称</th>
              <th style={{width: "20%"}}>分类</th>
              <th style={{width: "20%"}}>状态</th>
              <th style={{width: "20%"}}>操作</th>
            </tr>
            </thead>
            <tbody>
            {todos.map((todo) => (
                <tr key={todo.id} className={todo.complete ? 'bg-light' : ''}>
                  <td>
                  <span className={todo.complete ? 'text-decoration-line-through text-muted' : 'fw-medium'}>
                    {todo.name || '未命名任务'}
                  </span>
                  </td>
                  <td>
                    <Badge bg={getCategoryColor(todo.category)} pill>
                      {todo.category || '默认'}
                    </Badge>
                  </td>
                  <td>
                    <div className="d-flex justify-content-start align-items-center">
                      <Badge bg={todo.complete ? 'success' : 'warning'} pill>
                        {todo.complete ? '已完成' : '进行中'}
                      </Badge>
                      <Form.Check
                          type="checkbox"
                          id={`complete-checkbox-${todo.id}`}
                          checked={todo.complete || false}
                          onChange={() => onToggleComplete(todo.id)}
                          className="ms-2"
                      />
                    </div>
                  </td>
                  <td>
                    <div className="d-flex gap-2">
                      <Button
                          variant="outline-primary"
                          size="sm"
                          onClick={() => onEditTodo(todo)}
                      >
                        编辑
                      </Button>
                      <Button
                          variant="outline-danger"
                          size="sm"
                          onClick={() => onDeleteTodo(todo.id)}
                      >
                        删除
                      </Button>
                    </div>
                  </td>
                </tr>
            ))}
            </tbody>
          </Table>
        </Card>
      </div>
  );
};

// 根据分类名生成不同的颜色
const getCategoryColor = (category) => {
  if (!category) return 'secondary';

  // 简单的哈希函数生成颜色
  const colors = ['primary', 'success', 'info', 'warning', 'danger', 'dark'];
  const hash = category.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  return colors[hash % colors.length];
};

export default TodoList;